<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>忘记密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="忘记密码" />
    <meta name="keywords" content="忘记密码" />
    <link rel="stylesheet" href="/static/user/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/user/css/animate.css">
    <link rel="stylesheet" href="/static/user/css/style.css?2">

    <!-- Modernizr JS -->
    <script src="/static/user/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="/static/user/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="style-3 tech-flat-bg">
    <!-- 添加背景元素 -->
    <div class="tech-bg-element"></div>
    <!-- 添加背景装饰元素 -->
    <div class="bg-decoration"></div>
    <div class="bg-decoration"></div>
    <div class="bg-decoration"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="menu">
                    <!-- 这里可以根据需求添加导航链接 -->
                </ul>
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-md-6">
                <form action="#" class="fh5co-form animate-box tech-flat-form p-4" data-animate-effect="fadeInRight">
                    <h2 class="tech-flat-title">忘记密码</h2>
                    <p class="form-description">输入您的邮箱地址，我们将发送重置密码的链接到您的邮箱。</p>
                    <div class="form-group">
                        <label for="email" class="sr-only">邮箱地址</label>
                        <input type="email" class="form-control" id="email" placeholder="请输入邮箱" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <p><a href="/register/">注册</a> 或 <a href="/login/">登录</a></p>
                    </div>
                    <div class="form-group">
                        <input type="button" value="发送邮件" class="btn btn-primary">
                    </div>
                </form>
            </div>
            <!-- 添加右侧文字说明部分 -->
            <div class="col-md-6">
                <div class="site-introduction p-4">
                    <h2 class="tech-flat-title fadeInUp">重置密码说明</h2>
                    <p class="fadeInUp" style="animation-delay: 0.2s;">忘记密码不用着急，我们为您提供简单快捷的重置方式：</p>
                    <ul>
                        <li class="fadeInUp" style="animation-delay: 0.4s;">输入您注册时使用的邮箱地址。</li>
                        <li class="fadeInUp" style="animation-delay: 0.6s;">我们会立即发送重置密码的链接到您的邮箱。</li>
                        <li class="fadeInUp" style="animation-delay: 0.8s;">点击邮件中的链接，即可重新设置您的密码。</li>
                    </ul>
                    <p class="fadeInUp" style="animation-delay: 1s;">请确保您输入的邮箱地址正确，如有任何问题，欢迎联系我们的客服。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="height: 25px;position: fixed;top: 0px;width:100%">
        <!-- 应用扁平风格的警告框 -->
        <div class="alert alert-danger tech-flat-alert"></div>
        <div class="alert alert-success tech-flat-alert"></div>
    </div>
    <!-- jQuery -->
    <script src="/static/user/js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="/static/user/js/bootstrap.min.js"></script>
    <!-- Placeholder -->
    <script src="/static/user/js/jquery.placeholder.min.js"></script>
    <!-- Waypoints -->
    <script src="/static/user/js/jquery.waypoints.min.js"></script>
    <!-- Main JS -->
    <script src="/static/user/js/main.js"></script>
</body>
</html>

